HTML Tables

HTML அட்டவணைகள்

HTML அட்டவணைகள்

HTML அட்டவணைகள் வலை மேம்பாட்டாளர்கள் தரவுகளை வரிசைகள் மற்றும் நெடுவரிசைகளில் ஏற்பாடு செய்ய அனுமதிக்கின்றன.

நிறுவனம் தொடர்பு நாடு
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

HTML அட்டவணையை வரையறுத்தல்

HTML இல் உள்ள ஒரு அட்டவணையில் வரிசைகள் மற்றும் நெடுவரிசைகளுக்குள் அட்டவணை கலங்கள் உள்ளன.

எடுத்துக்காட்டு

ஒரு எளிய HTML அட்டவணை:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

அட்டவணை கலங்கள்

ஒவ்வொரு அட்டவணை கலமும் <td> மற்றும் </td> குறிச்சொல்லால் வரையறுக்கப்படுகிறது.

td என்பது table data (அட்டவணை தரவு) என்பதைக் குறிக்கிறது.

<td> மற்றும் </td> க்கு இடையே உள்ள அனைத்தும் ஒரு அட்டவணை கலத்தின் உள்ளடக்கமாகும்.

எடுத்துக்காட்டு

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

📝 குறிப்பு:

ஒரு அட்டவணை கலத்தில் அனைத்து வகையான HTML உறுப்புகளும் இருக்கலாம்: உரை, படங்கள், பட்டியல்கள், இணைப்புகள், பிற அட்டவணைகள், முதலியன.

அட்டவணை வரிசைகள்

ஒவ்வொரு அட்டவணை வரிசையும் <tr> உடன் தொடங்கி </tr> குறிச்சொல்லுடன் முடிகிறது.

tr என்பது table row (அட்டவணை வரிசை) என்பதைக் குறிக்கிறது.

எடுத்துக்காட்டு

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

ஒரு அட்டவணையில் உங்களுக்குத் தேவையான அளவுக்கு வரிசைகள் இருக்கலாம்; ஒவ்வொரு வரிசையிலும் உள்ள கலங்களின் எண்ணிக்கை ஒரே மாதிரியாக இருப்பதை உறுதிப்படுத்தவும்.

📝 குறிப்பு:

ஒரு வரிசையில் மற்றொரு வரிசையை விட குறைவான அல்லது அதிகமான கலங்கள் இருக்கும் நேரங்கள் உள்ளன. இது பற்றி நீங்கள் பின்னர் ஒரு அத்தியாயத்தில் கற்றுக்கொள்வீர்கள்.

அட்டவணை தலைப்பு கலங்கள்

சில நேரங்களில் உங்கள் கலங்கள் அட்டவணை தலைப்பு கலங்களாக இருக்க வேண்டும். அந்தச் சந்தர்ப்பங்களில் <td> குறிச்சொல்லுக்குப் பதிலாக <th> குறிச்சொல்லைப் பயன்படுத்தவும்:

th என்பது table header (அட்டவணை தலைப்பு) என்பதைக் குறிக்கிறது.

எடுத்துக்காட்டு

முதல் வரிசை அட்டவணை தலைப்பு கலங்களாக இருக்கட்டும்:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

இயல்புநிலையாக, <th> உறுப்புகளில் உள்ள உரை தடித்ததாகவும் மையத்திலும் இருக்கும், ஆனால் நீங்கள் அதை CSS உடன் மாற்றலாம்.

பயிற்சி

❓ HTML இல் ஒரு அட்டவணை-கலத்திற்கான சரியான குறிச்சொல் பெயர் எது?

<tc>
✗ தவறு!
<td>
✓ சரி! <td> என்பது அட்டவணை கலத்திற்கான குறிச்சொல்
<tr>
✗ தவறு! <tr> என்பது அட்டவணை வரிசைக்கான குறிச்சொல்

HTML அட்டவணை குறிச்சொற்கள்

குறிச்சொல் விளக்கம்
<table> ஒரு அட்டவணையை வரையறுக்கிறது
<th> அட்டவணையில் ஒரு தலைப்பு கலத்தை வரையறுக்கிறது
<tr> அட்டவணையில் ஒரு வரிசையை வரையறுக்கிறது
<td> அட்டவணையில் ஒரு கலத்தை வரையறுக்கிறது
<caption> அட்டவணை தலைப்பை வரையறுக்கிறது
<colgroup> வடிவமைப்பிற்காக அட்டவணையில் ஒன்று அல்லது அதற்கு மேற்பட்ட நெடுவரிசைகளின் குழுவைக் குறிப்பிடுகிறது
<col> <colgroup> உறுப்புக்குள் ஒவ்வொரு நெடுவரிசைக்கும் நெடுவரிசை பண்புகளைக் குறிப்பிடுகிறது
<thead> அட்டவணையில் தலைப்பு உள்ளடக்கத்தை தொகுக்கிறது
<tbody> அட்டவணையில் உடல் உள்ளடக்கத்தை தொகுக்கிறது
<tfoot> அட்டவணையில் அடிக்குறிப்பு உள்ளடக்கத்தை தொகுக்கிறது

அனைத்து கிடைக்கக்கூடிய HTML குறிச்சொற்களின் முழுமையான பட்டியலுக்கு, எங்கள் HTML குறிச்சொல் குறிப்பைப் பார்வையிடவும்.